<template>
  <a-card :title="title">
    <a-input
      compact
      v-model.trim="searchTree"
      placeholder="请输入关键字筛选"
      @change="searchClick"
    />
    <a slot="extra" href="javascript:void(0)">
      <a-popover placement="top">
        <template slot="content">刷新</template>
        <a @click="loadTree"><a-icon type="sync" /></a>
      </a-popover>
    </a>
    <a-spin :spinning="treeLoading">
      <a-tree
        :icon="getTreeIcon"
        :style="{
          maxHeight: '620px',
          minHeight: '620px',
          'overflow-y': 'auto',
        }"
        :treeData="treeList"
        :selectedKeys="selectedTreeKeys"
        @select="handleTreeClick"
      />
    </a-spin>
  </a-card>
</template>
<script>
import { queryDicTreeSelect } from "@/api/sys/system/dic";
import { getTree } from "@/utils/tree";
export default {
  data() {
    return {
      treeLoading: false,
      searchTree: "",
      treeList: [],
      searchTreeList: [],
      selectedTreeKeys: [],
    };
  },
  props: {
    title: {
      type: String,
      require: true,
    },
    dicTypeUniqueCode: {
      type: String,
      require: true,
    },
  },
  mounted() {
    this.loadTree();
  },
  methods: {
    //#region 加载左侧树
    loadTree() {
      // 加载树
      this.treeLoading = true;
      // 加载左侧树
      queryDicTreeSelect({ dicTypeUniqueCode: this.dicTypeUniqueCode })
        .then((res) => {
          this.treeList = res.data;
          this.searchTreeList = res.data;
          this.treeLoading = false;
        })
        .catch(() => {
          this.treeLoading = false;
        });
    },
    //#endregion
    // 左侧树查询方法
    searchClick() {
      if (this.searchTree.length > 0) {
        this.treeList = [];
        getTree(
          this.searchTree,
          (data) => (this.treeList = data),
          this.searchTreeList
        );
      } else {
        this.treeList = this.searchTreeList;
      }
    },
    // 点击树时,加载右侧表格
    handleTreeClick(selectedKeys, info) {
      this.$emit("handleTreeClick", selectedKeys, info);
    },
    // 左侧树图标
    getTreeIcon(props) {
      let { objectType } = props;
      if (objectType === this.EQPTYPETREE_ENUM.WorkArea) {
        return <a-icon type="gold" theme="twoTone" />;
      } else if (objectType === this.EQPTYPETREE_ENUM.Equipment) {
        // 有子集
        return <a-icon type="tags" theme="twoTone" />;
      } else if (objectType === this.EQPTYPETREE_ENUM.Chamber) {
        // 如果是chamber
        return <a-icon type="tag" theme="twoTone" />;
      }
    },
  },
};
</script>